<template>
	<!--收货地址-->
	<view class="page-content">
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--地址列表-->
			<template v-if="datalist && datalist.length > 0 ">
				<view class="body-box">
					<block v-for="(item,index) in datalist" :key="index">
						<view class="box-li">
							<view class="box-li-l" >
								<image class="box-li-l-img" :src="userInfo.img || defaultImg"></image>
								<view class="box-li-l-box">
									<view class="box-li-l-tit">
										<view class="box-li-l-tit-name">{{item.nickname}}</view>
										<view class="box-li-l-tit-mobile">{{item.mobile}}</view>
										<view class="box-li-l-tit-statu" v-if="item.order===1">默认</view>
									</view>
									<view class="box-li-l-cen">{{item.site}}</view>
								</view>
							</view>
							<view class="box-li-r" @click.stop="toDet('edit',item)">
								<image class="box-li-r-icon" :src="$mAssetsPath.icon_bianji2"></image>
							</view>
						</view>
					</block>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getAddressLists,editAddresss
	} from '@/common/api.js';
	import loadMore from '@/components/uni-load-more/load-more.vue';
	export default {
		components: {
			loadMore
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist: [],
				page_title: '记事本',
				formdata:{
					page:1,
					limit:10
				},
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
				defaultImg: "/static/icon/missing-face.png", // 加载失败的占位图片
			}
		},
		computed: {
			...mapGetters(['companyInfo','userInfo','address']),
		},
		onShow() {
			this.getdata();
		},
		onLoad(option) {
			
			console.log(222, option)
		},
		onNavigationBarButtonTap(e) {
			console.log(123, e)
			if (e.index === 0) {
				console.log(444)
				uni.navigateTo({
					url: `/pages/address/add_address?pageType=add`
				})
			}
		},
		methods: {
			...mapActions('user',['setAddress',]),
			//接口-收货列表
			getdata(){
				getAddressLists(this.formdata).then(res=>{
					if(res.code === 2000){
						this.datalist = res.data.data;
						if(!!this.address){
							if(this.datalist && this.datalist.length>0){
								this.datalist.forEach(item=>{
									this.$set(item,'checked',false)
									if(item.id === this.address.id){
										item.checked = true;
									}
								})
							}
						}
					}
				})
			},
			tosel(item){
				console.log(111,item)
				/* if(this.datalist && this.datalist.length>0){
					this.datalist.forEach(ite =>{
						if(ite.id === item.id){
							ite.order = 1;
						}else{
							ite.order = 0;
						}
					})
				}
				item.order = 1;
				editAddresss(item).then(res=>{
					if(res.code===2000){
						this.$util.prePage().resdata();
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}) */
				this.setAddress(item)
				this.$util.prePage().resdata();
				uni.navigateBack({
					delta:1
				})
			},
			//跳转详细页
			toDet(type,item) {
				uni.navigateTo({
					url: `/pages/address/add_address?pageType=${type}&id=${item.id}&nickname=${item.nickname}&mobile=${item.mobile}&site=${item.site}&order=${item.order}`
				})
			},
			rightAdd() {
				uni.navigateTo({
					url: `/pages/noteBook/noteBookAdd`
				})
			},
			rightSearch() {

			},
			//删除
			deleted(e) {
				console.log(333, e)
				if (this.datalist && this.datalist.length > 0) {

				}
			},
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.page-content {
		width: 100vw;
		height: 100%;

		.page-body {
			display: flex;
			height: calc(100%);
			background: $uni-bg-color-grey;

			.body-box {
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;

				.box-li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					margin-bottom: 30rpx;

					.box-li-l {
						display: flex;
						align-items: center;
						width: calc(100% - 60rpx);
						.box-li-l-img{
							width: 68rpx;
							height: 68rpx;
							margin-right: 20rpx;
							border-radius: 34rpx;
						}
						.box-li-l-box{
							width: calc(100% - 150rpx);
							display: flex;
							flex-direction: column;
							.box-li-l-tit{
								display: flex;
								align-items: center;
								.box-li-l-tit-name{
									font-size: 32rpx;
									font-weight: 400;
									color: $font-color-3;
									margin-right: 16rpx;
								}
								.box-li-l-tit-mobile{
									font-size: 32rpx;
									font-weight: 400;
									color: $font-color-9;
									margin-right: 16rpx;
								}
								.box-li-l-tit-statu{
									height: 30rpx;
									font-size: 22rpx;
									line-height: 30rpx;
									color: $font-color-w;
									background: $uni-but-bg-color;
									border-radius: 6rpx;
									padding: 0 10rpx;
								}
								.box-li-l-tit-statu2{
									height: 30rpx;
									font-size: 22rpx;
									line-height: 30rpx;
									color: $font-color-w;
									background: #aaa;
									border-radius: 6rpx;
									padding: 0 10rpx;
									margin-left: 10rpx;
								}
							}
							.box-li-l-cen{
								font-size: 28rpx;
								font-weight: 400;
								color: $font-color-9;
							}
						}
					}

					.box-li-r {
						display: flex;
						justify-content: flex-end;
						width: 60rpx;
						border-left: 1rpx solid #ddd;

						.box-li-r-icon {
							margin: 15rpx 0;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}
</style>
